<template>
  <div class="category">
    <lRTitle :text="statusTitle"></lRTitle>
    <div ref="chart" class="pieChart"></div>
  </div>
</template>

<script>
import lRTitle from "./lRTitle.vue";
import { connrequest } from "@/api/firstPage";
export default {
  name: "categoryStats",
  components: { lRTitle },
  data() {
    return {
      statusTitle: "企业智库分类统计",
      chartData: []
    };
  },
  mounted() {
    this.getDictKnowledgeClass().then(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      const myChart = this.$echarts.init(this.$refs.chart);

      // 使用南丁格尔玫瑰图配置
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        legend: { show: false },
        series: [
          {
            type: "pie",
            roseType: "radius", // 关键配置：南丁格尔玫瑰图
            radius: [20, "70%"], // 内半径20，外半径70%
            center: ["50%", "50%"],
            color: ["#a2752f", "#b74444", "#b75f44", "#1d4b73", "#006e5f", "#1a577b", "#978750"],
            label: {
              show: true,
              formatter: "{b}\n{d}%", // 名称换行显示百分比
              color: "#ccc",
              fontSize: 12,
              position: "outside"
            },
            labelLine: {
              show: true,
              length: 15,
              lineStyle: { width: 1 }
            },
            itemStyle: {
              borderWidth: 2
            },
            // 数据需不同以生成不同半径（这里假设数据为[5,4,3,2,1]）
            data: this.chartData
          }
        ]
      };

      myChart.setOption(option);
      window.addEventListener("resize", myChart.resize);
    },
    async getDictKnowledgeClass() {
      const res = await connrequest("GetDictKnowledgeClass");
      if (res.Status.StatusCode === 0) {
        this.chartData = res.Data.map((item) => {
          return {
            value: item.Count,
            name: item.Class
          };
        });
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.$refs.chart.resize);
  }
};
</script>

<style scoped>
.category {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 28%;
}
.pieChart {
  flex: 1;
}
</style>
